<!Doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>移动元素</title>
	<style>
		#ball{position:absolute;width:100px;height:100px;background:rgba(0,0,255,.4);border-radius:50%;}
		input{margin-bottom:20px;}
	</style>
</head>
<body>
	<div id="ball" style="left:200px;top:0;"></div>
	<div>
		x:<input id="x" type="text" class="x"><br/>
		y:<input id="y" type="text" class="y"><br/>
		<input type="button" value="移动元素" onclick="move()">
	</div>
	
	<script>
		function move(){
			var ballPosition = document.getElementById('ball');
			ballPosition.style.left = (parseInt(document.getElementById('x').value)+parseInt(document.getElementById('ball').style.left)) + 'px';
			ballPosition.style.top = (parseInt(document.getElementById('y').value) + parseInt(document.getElementById('ball').style.top)) + 'px';
			ballPosition.style.width = (parseInt(document.getElementById('x').value) + parseInt(document.getElementById('ball').style.left)) + 'px';
			ballPosition.style.height = (parseInt(document.getElementById('x').value) + parseInt(document.getElementById('ball').style.top)) + 'px';
			var a = document.getElementById('ball');
			a.innerHTML = "hello Javascript";

		}
	</script>
</body>
</html>